<div class="content">
    <div id="example_title">
        <h1>Dependent Fields</h1>
        Select an employee, then manager field will be enabled.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<style>
</style>

<div id="tab-example">
    <div class="w2ui-field">
        <label>Employee: </label>
        <div><input id="field1" style="width: 300px"></div>
    </div>
    <div class="w2ui-field">
        <label>Manager: </label>
        <div><input id="field2" style="width: 300px" placeholder="Select and employee first" readonly></div>
    </div>
</div>

<!--CODE-->
<script type="module">
import { w2field, query } from '__W2UI_PATH__'

query(async () => {
    let data = await fetch('data/enum.json').then(resp => resp.json()).then(data => data)
    data.records.sort((a, b) => a.text.localeCompare(b.text))
    let fld1 = new w2field({
        type: 'list',
        el: query('#field1')[0],
        items: data.records,
    })
    query('#field1')
        .on('change', (event) => {
            let sel = fld1.get()
            console.log('field1: ', sel)
            if (sel) {
                fld2.options.items = data.records
                query('#field2')
                    .removeAttr('placeholder')
                    .prop('readonly', false)
                    .removeAttr('readonly')
            } else {
                fld2.options.items = []
                fld2.tmp.pholder = 'Select empoyee first'
                query('#field2')
                    .attr('placeholder', 'Select employee first')
                    .attr('readonly', true)
            }
            fld2.set(null)
        })

    let fld2 = new w2field({
        type: 'list',
        el: query('#field2')[0],
        items: []
    })
    query('#field2')
        .attr('placeholder', 'Select employee first')
        .prop('readonly', true)
        .change((event) => {
            let sel = event.target._w2field.selected
            console.log('field2: ', sel)
        })
})
</script>
